<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>1、file.js 是浏览器需要使用的数据，可通过tools.bat，第三项，读取文件夹，组成数组格式，输出filex.js文件</p>
      <p>2、list.js 是将控制台打印的数据 都复制到该文件中 供node.js文件运行时调用</p>
      <p>3、node.js 是node.js执行文件</p>
      <p>说明：浏览器运行时，需要将文件夹需要移动到tp6项目的public文件中供浏览器跨域调用</p>
      <button @click="copy">控制台打印所有视频的base64数据</button>
      <div v-for="(v,i) in videoUrl" :key="i">
        <video
          @loadeddata="createPreImg($event,i)"
          :src="v.url"
          crossorigin="anonymous"
          preload="auto"
        ></video>
      </div>
    </div>
  </body>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
  <script src="./file.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        path,
        list,
        src: "",
        videoUrl: [],
      },
      mounted() {
        this.videoUrl = this.list.map((v) => {
          return {
            url: this.path + v,
            name: v,
            base64: "",
          };
        });
        console.log(this.videoUrl);
      },
      methods: {
        copy() {
          console.log(this.videoUrl);
        },
        //截图视频 获取base64数据插入对应的数组中
        createPreImg(event, index) {
          const _this = this;
          const videoEle = event.target;
          videoEle.currentTime = 0; // 设置视频开始播放时间
          videoEle.addEventListener("canplay", function () {
            const canvas = document.createElement("canvas");
            const scale = 0.6; // 压缩系数
            canvas.width = videoEle.videoWidth * scale;
            canvas.height = videoEle.videoHeight * scale;
            canvas
              .getContext("2d")
              .drawImage(videoEle, 0, 0, canvas.width, canvas.height);
            _this.videoUrl[index].base64 = canvas.toDataURL("image/webp");
          });
        },
      },
    });
  </script>
</html>
